<template>

	<div class='container'>
		<nav-header>
			<div class="" slot="left"></div>
		</nav-header>
		<div class="body" v-if="orderList != null">
			<div class='page-header'>
				<span>全部订单</span>
			</div>
			<div class='list-item'>
				<div v-for="(item,index) in orderList" :key="index" class='big-order'>
					<router-link class='order-item' v-for="(currentItem,index) in item" :key="currentItem.order_id" :to="currentItem.url">
						<img class='thumb-img' mode='aspectFill' :src='currentItem.order_goods_info.goods_image' />
						<div class='item-span'>
							<div class='item-title'>
								<span class='itme-type' v-if="currentItem.order_label_text != null">{{currentItem.order_label_text}}</span>
								<span class='item-title-span'>{{currentItem.order_goods_info.goods_name}}</span>
							</div>
							<span class='specify'>{{currentItem.order_goods_info.goods_spec}}</span>
							<div class='order-state'>
								<span class='topay' v-if="currentItem.order_state == 10">{{currentItem.order_state_text}}</span>
								<div v-else-if="currentItem.order_state == 20">
									<span class='payed'>{{currentItem.order_state_text}}</span>
								</div>
								<div class='finish' v-else>
									<span class='payed'>{{currentItem.order_state_text}}</span>
									<!--<span class='get-more'>再来一单</span>-->
								</div>
							</div>
						</div>
						<div @click.stop.prevent="delOrder(currentItem.all_no)">删除</div>
					</router-link>
				</div>
			</div>
		</div>
		<div class="container-box" v-else>
			<div style='background-image: url(http://47.98.119.130/test/yami/no_order_bg.png);height: 100%; background-size: 100% 100%;'>
				<div class='page-header'>
					<span>没有订单</span>
				</div>
				<div class='no-order-mes'>
					<span>您还没有订单哦，快去定制吧！</span>
				</div>

			</div>
		</div>
		<tabBar-footer></tabBar-footer>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import footer from "@/components/footer/footer"
	import server from '@/server/api';
	import { mapGetters, mapState, mapActions } from 'vuex';
	export default {
		name: 'order',
		props: {},
		data() {
			return {
				hasGoods: true,
				isPay: 3
			}
		},
		computed: {
			...mapState(['orderList'])
		},
		mounted() {
			console.log(this.$store.state.orderList)
		},
		created() {
			this.getOrderList({
				memberId: 101076
			})
			//			console.log(this)
		},
		methods: {
			...mapActions(['getOrderList']),
			goToPayment(paymentDetail) {
				this.$store.state.paymentDetail = paymentDetail;
				this.$router.push("/payment")
			},
			delOrder(all_no) {
				console.log(all_no)
				server.post("/index/order/del", {
					all_no
				}, function(res) {
					console.log(res)
				})
			}
		},
		components: {
			"nav-header": header,
			"tabBar-footer": footer,
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: absolute;
		top: 90px;
		bottom: 120px;
		width: 100%;
		height: calc(100% - 190px);
		.container-box {
			height: 100%;
		}
		.body {
			height: 100%;
			overflow: scroll;
		}
		.page-header {
			padding: 0 40px;
			margin-bottom: 4px;
			span {
				display: block;
				line-height: 84px;
				font-size: 60px;
				color: #4A4A4A;
			}
		}
		.list-item {
			padding: 0 40px;
			margin-bottom: 120px;
			.big-order {
				padding-top: 76px;
				border-bottom: 1px solid #DCDCDC;
				display: block;
				text-decoration: none;
				.order-item {
					text-decoration: none;
					display: flex;
					padding-bottom: 70px;
					.item-span {
						width: 380px;
						.item-title {
							display: flex;
							align-items: center;
							height: 42px;
							margin-bottom: 2px;
							.itme-type {
								flex-shrink: 0;
								height: 34px;
								padding: 0 8px;
								margin-right: 10px;
								line-height: 34px;
								border: 1px solid #ef364e;
								color: #ef364e;
								font-size: 24px;
								border-radius: 5px;
							}
							.item-title-span {
								width: 100%;
								height: 42px;
								line-height: 42px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								font-size: 30px;
								color: #4A4A4A;
							}
						}
						.specify {
							display: block;
							margin-bottom: 18px;
							font-size: 28px;
							color: #67666B;
						}
						.order-state {
							display: flex;
							.topay {
								display: block;
								width: 158px;
								height: 56px;
								line-height: 56px;
								text-align: center;
								font-size: 12px;
								color: #FFFFFF;
								border-radius: 10px;
								background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
								box-shadow: 0 10px 10px 0 rgba(244, 63, 92, 0.15);
							}
							.payed {
								display: block;
								background-color: #f8f8f8;
								width: 158px;
								height: 56px;
								margin-right: 15px;
								font-size: 24px;
								color: #67666b;
								text-align: center;
								line-height: 56px;
							}
							.finish {
								display: flex;
							}
							.get-more {
								display: block;
								width: 158px;
								height: 56px;
								margin-left: 20px;
								line-height: 56px;
								text-align: center;
								font-size: 24px;
								color: #67666B;
								border: 2px solid #E6E6E6;
								border-radius: 8px;
							}
						}
					}
					.thumb-img {
						flex-shrink: 0;
						width: 226px;
						height: 152px;
						border-radius: 8px;
						margin-right: 74px;
					}
				}
			}
		}
	}
	/*没有订单  */
	
	.no-order-mes {
		padding: 30px 40px;
		color: #67666B;
		font-size: 30px;
	}
</style>